<template>
	<view class="tip" @click="close">
		<view class="tipBox">
			<view class="title">{{tipTitle}}
			<image src="../../static/image/tipcloseIcon.png" class="tipclose" @click.stop="close"></image>
			</view>
			<view class="ontent">{{tipContent}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"tip",
		data(){
			return{
				
			}
		},
		props:{
			tipContent:{
				type:String
			},
			tipTitle:{
				type:String
			}
		},
		methods:{
			close(){
				this.$emit('close')
			}
		}
	}
</script>

<style>
	.tip{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background:rgba(20,20,38,0.8);
		z-index: 5;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.tipBox{
		width: 629rpx;
		min-height: 200rpx;
		height: auto;
		padding: 20rpx 0;
		background: #FFFFFF;
		box-shadow: 0px 5rpx 11rpx rgba(0, 0, 0, 0.3);
		opacity: 1;
		border-radius: 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		position: relative;

	}
	.title{
		font-size: 14px;
		color: #00C9A7;
		width: 100%;
		height: auto;
		text-align: center;
		padding: 14rpx 0;
		margin-top: 35rpx;
		border-bottom: 1rpx solid rgba(201,202,206,0.6);
	}
	.tipclose{
		position: absolute;
		top: 36rpx;
		right: 36rpx;
		width: 36rpx;
		height:36rpx ;
	}
	.ontent{
		width: calc(100% - 50rpx);
		padding: 36rpx 25rpx;
		font-size: 13px;
		color: #383C41;
		
	}
</style>
